header{
    // 网页标题
    .title{
        h1{
            font-size: 1.6rem;
            font-weight: 700;
        }
    }
    // 顶部导航
    .top-bar{
        ul{
            li{
                a{
                    color: #757575;
                }
                padding: 2px 6px;
                border-radius: 5px;
            }
        }
        .active-bar-item{
            a{
                font-weight: 700;
                color: rgb(0,154,97);
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
    // 搜索框
    .search{
        input{
            box-sizing: border-box;
            border: 1px solid #c1c1c1;
            border-radius: 3px;
            padding: 2px 5px;
            font-size: .9rem;
            &:focus{
                border: 1px solid #3b99fc;
                box-shadow: 0 0 3px 0 #3b99fc;
            }
        }
        .icon-sousuo{
            right: 10%;
            top: 10%;
            color: #c1c1c1;
            font-weight: 700;
        }
    }
    .message{
        .create-btn{
            background-color: transparent;
            border: 1px solid #c1c1c1;
            border-radius: 3px;
            display: block;
            padding: 0 10px;
            &:hover{
                background-color: #f1f1f1;
            }
        }
        .iconfont{
            font-size: 1.5rem;
            display: block;
            border: 3px;
        }
        .avatar{
            height: 30px;
            width: 30px;
        }
    }
    a:hover{
        text-decoration: none;
    }
}


//主要内容

main{
    // 左边
    .left{
        .iconfont{
            display: block;
            height: 16px;
            width: 16px;
            text-align: center;
            line-height: 16px;
            margin-right: 10px;
            font-size: 1rem;
        }
        .h-line{
            display: block;
            width: 50%;
            height: .1px;
            background-color: #c1c1c1;
        }
        li{
            margin: 5px 0;
            padding: 5px 10px;
        }
        img{
            height: 16px;
            width: 16px;
            margin-right: 10px;
        }
        .left-item{
            a{
                color: #757575;
                font-size: 1rem;
                &:hover{
                    text-decoration: none;
                }
            }
        }

        .left-item-active{
            background-color: rgb(0,154,97);
            border-radius: 5px;
            a{
                color: #fff;
                font-weight: 700;
            }
        }
    }
    // 中间主要内容
    .main{
        // 推送设置
        .push-settings{
            padding-bottom: 10px;
            .settings-item{
                border-right: .1px solid #e1e1e1;
                padding: 0 10px;
                display:flex;
                align-items:flex-end;
                color: #999;
                font-size: .8rem;
            }
            .settings-item:first-child{
                color: #000 !important;
                font-size: 1rem;
                padding-left: 0;
            }
            .settings-item:last-child{
                border: 0;
            }
            .btn{
                font-size: .8rem;
            }
        }
        // 博客
        .blog{
            a{
                color: #888;
                font-size: .9rem;
                &:hover{
                    text-decoration: none;
                }
            }
            .blog-item{
                margin: 20px 0;
                .blog-source{
                    color: #9e9e9e;
                    font-size: .8rem;
                }
                .brief-content{
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }
                .blog-title{
                    color: #000;
                    font-size: 1.1rem;
                    margin: 5px 0;
                }
                .release-info{
                    margin: 10px 0;
                    color: #666;
                    font-size: .9rem;
                    .release-time{
                        color: #9e9e9e;
                    }
                    .zan{
                        margin-right: 20px;
                    }
                }
                .icon-zan1{
                    background-color: rgba(1,126,102,0.08);
                    color: #009a61;
                    display: inline-block;
                    border-radius: 100%;
                    height: 20px;
                    width: 20px;
                    line-height: 20px;
                    text-align: center;
                    &:hover{
                        color: #fff;
                        background-color: #009a61;
                    }
                }
                .blog-img{
                    background-image: url(../images/avatar.png);
                    margin-left: 20px;
                    margin-top: 10px;
                    background-size: 100% auto;
                    background-position: 50% 50%;
                    width: 300px;
                    height: 70px;
                    border-radius: 5px;
                }
            }
        }
        #get-more-blog{
            color: #009a61;
            border: 1px solid #e1e1e1;
            font-size: .9rem;
            &:hover{
                background-color: #f1f1f1;
            }
        }
    }
    // 右边
    .right{
        // 招聘
        .recruitment{
            color: #8a6d3b;
            background-color: #fcf8e3;
            border: 1px solid #faebcc;
            border-radius: 5px;
            padding-left: 10px;

        }
        .right-block{
            display: block;
            height: 50px;
            line-height: 50px;
            font-size: .8rem;
        }
        
        // 广告
        .advertising-space{
            text-align: center;
            color: #a1a1a1;
        }

        // 课程推荐
        .course-recommendation{
           background-color: #fafafa;
            border-radius: 5px;
            overflow: hidden;
            position: relative;
            height: 250px;
            .course-header{
                .course-title{
                    color: #009a61;
                    font-weight: 700;
                    &:hover{
                        color: #046843;
                    }
                }
                .course-control{
                    a{
                        display: block;
                        margin: 0 3px;
                        width: 18px;
                        height: 18px;
                        text-align: center;
                        line-height: 18px;
                        font-size: .8rem;
                        border-radius: 100%;
                        background-color: #009a61;
                        color: #fff;
                        text-decoration: none;
                        &:hover{
                            background-color: #046843;
                        }
                    }
                }
            }
            // 走马灯主要内容
            .course-main{
                position: absolute;
                width: 500%;
                margin-left: 5%;
                animation: carousel-auto 20s infinite;
                .course-item{
                    display: inline-block;
                    width: 18%;
                    margin-right: 1.6%;
                    left: 0;
                    img{
                        width: 100%;
                        border-radius: 5px;
                        margin: 5px 0;
                    }
                    .item-title{
                        font-weight: 700;
                    }
                    .num-of-people{
                        font-size: .8rem;
                        color: #999;
                    }
                    .course-price{
                        color: #ED1C24;
                        font-weight: 700;
                    }
                    .pre-price{
                        text-decoration: line-through;
                        font-size: .8rem;
                        color: #999;
                    }
                }
                a{
                    &:hover{
                        text-decoration: none;
                    }
                }
            }
            // 幻灯片自动轮播
            @keyframes carousel-auto {
                0%,10%{
                    left: 0;
                }20%,30%{
                    left: -100%;
                }40%,50%{
                    left: -200%;
                }60%,70%{
                    left: -300%;
                }80%,90%{
                    left: -400%;
                }100%{
                    left: 0;
                }
            }
        }

        // 活动推荐
        .activity-recommendation{
            
            .card-header{
                background-color: transparent;
                a{
                    color: #009a61;
                }
            }
            .date{
                color: #009a61;
                border-radius: 2px;
                width: 40px;
                height: 50px;
                text-align: center;
                margin-right: 5px;
                margin-top: 5px;
                .date-week{
                    background-color: rgb(200,233,222);
                    font-size: .5rem;
                }
                .date-day{
                    background-color: #EBF7F3;
                    font-size: .8rem;
                }
                .date-week,.date-day{
                    padding: 0 2px;
                }
            }
            .list-item-title{
                a{
                    &:hover{
                        color: #009a61;
                    }
                }
            }
            .list-item-info{
                span{
                    color: #999;
                    font-size: .8rem;
                    margin-right: 5px;
                }
            }
        }

        // 联系合作
        .cooperation{
            color: #009a61;
            font-size: 1rem;
        }

    }
}

// 页脚
footer{
    margin-top: 20px;
    padding: 50px 0;
    .about{
        padding-bottom: 50px;
    }
    .footer-item-title{
        font-weight: 700;
        ul{
            margin-top: 20px;
        }
        .small-item{
            p,a{
                color: #888;
                font-size: .8rem;
                font-weight: lighter;
            }
            .iconfont{
                margin-right: 10px;
                font-size: 1.3rem;
                
            }
            .icon-weixin1{
                color: rgb(0,181,0);
            }
            .icon-weibo{
                color: rgb(240,52,69);
            }
            .icon-github{
                color: rgb(92,92,92);
            }
            .icon-tuitetwitter43{
                color: rgb(111,187,246);
            }
            .sao-y-sao{
                width: 80px;
            }
        }
        .small-item-icon{
            a{
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
    .web-site-info{
        p,a{
            color: #666;
            text-align: center;
            font-size: .8rem;
        }
        a:last-child{
            &:hover{
                text-decoration: none;
            }
        }
        p>a{
            margin-right: 10px;
        }
    }
}